<template>
  <div class="jy-login">
    <div class="bg-illustration">
      <img src="~@/assets/images/login/logo-img.png" alt="logo" />
    </div>
    <div class="login">
      <div class="login-content">
        <p class="system-name">{{ systemTitle }}</p>

        <el-form
          class="login-form"
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
        >
          <el-form-item prop="account">
            <el-input
              ref="account"
              v-model.trim="loginForm.account"
              placeholder="输入用户名"
              @keyup.enter.native="handleLogin('loginForm')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model.trim="loginForm.password"
              type="password"
              show-password
              placeholder="输入密码"
              @keyup.enter.native="handleLogin('loginForm')"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="verificationCode">
            <el-input
              ref="verificationCode"
              v-model="loginForm.verificationCode"
              @keyup.enter.native="handleLogin('loginForm')"
              placeholder="请输入验证码"
            ></el-input>
            <img
              class="code"
              :src="verificationCodeUrl"
              @click="reloadVerificationCodeUrl"
            />
          </el-form-item>
          <el-button
            class="jy-login-btn"
            type="text"
            :loading="showLoading.loginLoading"
            @click.native.prevent="handleLogin('loginForm')"
          >
            登 录
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { projectTitle, axiosBaseUrl } from '@/common/config/baseConfig'
import Cookies from 'js-cookie'

export default {
  data () {
    const validVerificationCode = (rule, value, callback) => {
      const verificationCode = Cookies.get('verificationCode')
      if (!value) {
        callback(new Error('请输入验证码'))
      } else if (value.toLowerCase() !== verificationCode.toLowerCase()) {
        callback(new Error('验证码不正确'))
      } else {
        callback()
      }
    }
    return {
      systemTitle: projectTitle,
      showLoading: {
        loginLoading: false
      },
      loginForm: {
        account: 'sysAdmin',
        password: '123456',
        verificationCode: ''
      },
      loginRules: {
        account: { required: true, trigger: 'blur', message: '请输入用户名' },
        password: { required: true, trigger: 'blur', message: '请输入密码' },
        verificationCode: { validator: validVerificationCode, trigger: 'blur' }
      },
      verificationCodeUrl: '',
      title: 'PROFESSION • CONVENIENT'
    }
  },
  methods: {
    msg () {
      this.$message.success('点击事件')
    },
    reloadVerificationCodeUrl () {
      this.verificationCodeUrl =
        axiosBaseUrl +
        '/api/v1/account/verificationCode?now=' +
        new Date().getTime()
    },
    toPage (res) {
      for (let i = 0; i < res.length; i++) {
        if (res[i].path) {
          this.$router.push({ path: res[i].path })
          return
        } else if (res[i].children) {
          this.toPage(res[i].children)
        }
      }
    },
    handleLogin (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.showLoading.loginLoading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(async (code) => {
              if (code === this.$constant.SUCCESS) {
                // 获取按钮权限 菜单权限 和 个人信息
                const [res, res1] = await Promise.all([
                  this.$store.dispatch('user/getMenu'),
                  this.$store.dispatch('user/getBtnPermission'),
                  this.$store.dispatch('user/getPermission'),
                  this.$store.dispatch('user/getRoles'),
                  this.$store.dispatch('user/getInfo')
                ])
                if (res && res1) {
                  this.toPage(res)
                }
              }
              this.reloadVerificationCodeUrl()
              this.showLoading.loginLoading = false
            })
            .catch((e) => {
              this.showLoading.loginLoading = false
            })
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.reloadVerificationCodeUrl()
  },
  mounted () {
    if (this.loginForm.account === '') {
      this.$refs.account.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  }
}
</script>
<style scoped lang="scss">
.jy-login {
  .bg-illustration {
    position: relative;
    height: 100vh;
    width: 64%;
    background: url("~@/assets/images/login/bg.png") no-repeat center center
      scroll;
    background-size: cover;
    float: left;
    -webkit-animation: bgslide 2.3s forwards;
    animation: bgslide 2.3s forwards;
    img {
      width: 248px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      height: auto;
      margin: 19px 0 0 25px;
    }
  }

  @-webkit-keyframes bgslide {
    from {
      left: -100%;
      width: 0;
      opacity: 0;
    }
    to {
      left: 0;
      width: 64%;
      opacity: 1;
    }
  }

  @keyframes bgslide {
    from {
      left: -100%;
      width: 0;
      opacity: 0;
    }
    to {
      left: 0;
      width: 64%;
      opacity: 1;
    }
  }

  .login {
    max-height: 100vh;
    overflow-y: auto;
    float: left;
    margin: 0 auto;
    width: calc(100% - 64%);

    .login-content {
      width: 505px;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100vh;
      .system-name {
        margin-top: 40%;
        font-size: 58px;
        font-weight: bolder;
        text-align: center;
        flex: 1;
      }
      .login-form {
        flex: 4;

        ::v-deep .el-input--small .el-input__inner {
          height: 32px;
          line-height: 32px;
          font-size: 16px;
          font-weight: bold;
          background: rgba(57, 57, 57, 0.07);
          margin: 12.5px 0;
          height: 68px;
          border: none;
          padding: 0 30px;
          border-radius: 10px;
        }
        ::v-deep .el-form-item:nth-child(3) {
          .el-form-item__content {
            display: flex;
            .code {
              width: 150px;
              line-height: 32px;
              background: rgba(57, 57, 57, 0.07);
              margin: 12.5px 0 12.5px 5px;
              height: 68px;
              border: 1px solid #bbc2c9;
            }
          }
        }
      }

      .jy-login-btn {
        background: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
        border: none;
        margin-top: 50px;
        margin-bottom: 20px;
        width: 100%;
        height: 58px;
        text-transform: uppercase;
        color: white;
        border-radius: 10px;
        position: relative;
        z-index: 2;
        font-weight: bold;
        font-size: 20px;
        background-size: 200% auto;
      }
      .jy-login-btn:hover {
        background-position: right center;
      }
    }
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1680px) {
  .bg-illustration {
    width: 50% !important;
    -webkit-animation: none !important;
    animation: none !important;
  }

  .login {
    width: 50% !important;
  }
}
@media only screen and (max-width: 1024px) {
  @-webkit-keyframes slideIn {
    from {
      left: -100%;
      opacity: 0;
    }
    to {
      left: 0;
      opacity: 1;
    }
  }

  @keyframes slideIn {
    from {
      left: -100%;
      opacity: 0;
    }
    to {
      left: 0;
      opacity: 1;
    }
  }

  .bg-illustration {
    float: none !important;
    background: url("~@/assets/images/login/bg2.png") center center !important;
    background-size: cover !important;
    -webkit-animation: slideIn 0.8s ease-in-out forwards !important;
    animation: slideIn 0.8s ease-in-out forwards !important;
    width: 100% !important;
    height: 190px !important;
    text-align: center !important;
    img {
      width: 100px !important;
      height: auto !important;
      margin: 20px auto !important;
      text-align: center !important;
    }
  }
  .login {
    float: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    .system-name {
      font-size: 25px !important;
      margin-top: 40px !important;
    }
    .login-content {
      -webkit-animation: slideIn 0.8s ease-in-out forwards !important;
      animation: slideIn 0.8s ease-in-out forwards !important;
      width: 85% !important;
      float: none !important;
      height: auto !important;

      .login-form {
        ::v-deep .el-input--small .el-input__inner {
          height: 45px !important;
          line-height: 45px !important;
        }
        ::v-deep .el-form-item:last-child {
          .el-form-item__content {
            display: flex;
            .code {
              height: 45px !important;
            }
          }
        }
      }
      .jy-login-btn {
        margin-top: 25px !important;
        margin-bottom: 20px;
        height: 50px !important;
      }
    }
  }
}
</style>
